<template>
	<view class="ucenter-page">
		<u-navbar title-size="36" height="42" :border-bottom="false" title="产品详情"></u-navbar>
		<view class="banner">
			<view class="product-box">
				<image src="../../static/images/product.png" class="img" mode=""></image>
				<image src="../../static/images/share.png" class="share" mode=""></image>
			</view>
			<view class="product-info">
				<view class="product-info__label">
					佣金
				</view>
				<view class="product-info__val">
					<text class="number">26000</text>
					元/台（起）
				</view>
			</view>
			<view class="product-content">
				<view class="name">
					ZE60E-10履带式液压挖掘机
				</view>
				<view class="model"><text>设备型号</text> ZE60E-10</view>
				<view class="date">
					<image src="../../static/images/list.png" mode="" class="icon"></image>
					<text class="date-text">6543人分享，543人推荐</text>
				</view>
			</view>
		</view>
		<view class="bg"></view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bar-height="8" bar-width="126"
			active-color="#383842" inactive-color="#606366" font-size="32" height="100" :active-item-style="activeStyle"
			:bar-style="barStyle"></u-tabs>
		<view class="tab-item" v-if="current == 0">
			<view class="eq-expian">
				<view class="model">
					<view class="model-logo">ZOOMLION</view>
					<view class="model-text">
						<view class="number">ZE60E-10</view>
						<view class="name">中联重科6t履带式液压挖掘机</view>
					</view>
				</view>
				<view class="title">
					<view>油耗降低5%</view>
					<view>效率提示40%</view>
				</view>
				<view class="expian-list">
					<view class="item">结构件一体化大截面设计，平台、X下车架按重载型设计，关键部位加强，经久耐用。</view>
					<view class="item">动臂、斗杆采用一体化铸造制作。减少开焊风险。</view>
				</view>
				<!-- <button type="default" class="btn tj-btn">推荐购买设备，立享佣金2600元</button> -->
			</view>
			<view class="tab-fixed">
				<view class="tab-link" @click="home">
					<image src="../../static/images/home.png" class="icon" mode=""></image>
					<view class="tab-link-title">前往首页</view>
				</view>
				<view class="tab-fixed-group flex_bd">
					<view class="btn btn-black">获取底价</view>
					<view class="btn flex_bd">分享他人购买</view>
				</view>
			</view>
		</view>
		<view class="tab-item" v-if="current == 1">
			<view class="params-group">
				<view class="params">
					<view class="head">
						<view class="title flex-center">
							<text>工作性能参数</text>
							<image src="../../static/images/dw.png" mode="" class="down"></image>
						</view>
						<view class="arrow-right flex-center">
							<view class="arrow-item flex-center">
								<view class="dot black"></view>
								<text>标配</text>
							</view>
							<view class="arrow-item flex-center">
								<view class="dot"></view>
								<text>标配</text>
							</view>
						</view>
					</view>
					<view class="table">
						<view class="table-head">参数名称</view>
						<view class="table-row">
							<view class="table-cell flex-center">
								<view class="table-td col1">最大额定其重量-Kg</view>
								<view class="table-td col2">25000</view>
							</view>
							<view class="table-cell flex-center">
								<view class="table-td col1">基本力最大起重力矩-KN.m</view>
								<view class="table-td col2">960</view>
							</view>
						</view>
					</view>
				</view>
				<view class="params">
					<view class="head">
						<view class="title flex-center">
							<text>工作速度</text>
							<image src="../../static/images/dw.png" mode="" class="down"></image>
						</view>
						<view class="arrow-right flex-center">
							<view class="arrow-item flex-center">
								<view class="dot black"></view>
								<text>标配</text>
							</view>
							<view class="arrow-item flex-center">
								<view class="dot"></view>
								<text>标配</text>
							</view>
						</view>
					</view>
					<view class="table">
						<view class="table-head">参数名称</view>
						<view class="table-row">
							<view class="table-cell flex-center">
								<view class="table-td col1">单绳最大速度-m/min</view>
								<view class="table-td col2">120</view>
							</view>
							<view class="table-cell flex-center">
								<view class="table-td col1">起重臂起重时间-s</view>
								<view class="table-td col2">25</view>
							</view>
						</view>
					</view>
				</view>
				<view class="params">
					<view class="head">
						<view class="title flex-center">
							<text>行驶参数</text>
							<image src="../../static/images/dw.png" mode="" class="down"></image>
						</view>
						<view class="arrow-right flex-center">
							<view class="arrow-item flex-center">
								<view class="dot black"></view>
								<text>标配</text>
							</view>
							<view class="arrow-item flex-center">
								<view class="dot"></view>
								<text>标配</text>
							</view>
						</view>
					</view>
					<view class="table">
						<view class="table-head">参数名称</view>
						<view class="table-row">
							<view class="table-cell flex-center">
								<view class="table-td col1">最大使用海拔高度-m</view>
								<view class="table-td col2">2000</view>
							</view>
							<view class="table-cell flex-center">
								<view class="table-td col1">百公里油耗-L</view>
								<view class="table-td col2">28</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: '设备介绍'
				}, {
					name: '设备参数'
				}],
				current: 0,
				activeStyle: {
					fontWeight: '500',
					color: '#383842'
				},
				barStyle: {
					borderRadius: '0px',
					background: "#A2C833"
				}
			}
		},
		onLoad() {

		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
			change(index) {
				this.current = index;
			},
			home() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style lang="scss">
	.product-box {
		height: 600rpx;
		position: relative;

		.img {
			width: 100%;
			height: 100%;
		}

		.share {
			width: 72rpx;
			height: 72rpx;
			position: absolute;
			right: 32rpx;
			top: 32rpx;
		}
	}

	.product-info {
		background: url(../../static/images/zoom.png) no-repeat center;
		height: 112rpx;
		background-size: cover;
		display: flex;
		align-items: center;
		line-height: 112rpx;

		.product-info__label {
			width: 180rpx;
			font-size: 32rpx;
			color: #fff;
			padding-left: 46rpx;
			background: #303337;
			background-size: cover;
			position: relative;
		}
		
		.product-info__label::after {
			content: '';
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			width: 0;
			height: 0;
			border-top: 112rpx solid #A2C833;
			border-left: 48rpx solid transparent;
		}

		.product-info__val {
			color: #fff;
			font-size: 28rpx;

			.number {
				font-size: 48rpx;
				font-weight: 600;
				margin-right: 4rpx;
			}
		}
	}

	.product-content {
		padding: 32rpx;
		padding-bottom: 40rpx;

		.name {
			font-size: 44rpx;
			color: #313A41;
			font-weight: 600;
			line-height: 60rpx;
		}

		.model {
			font-size: 28rpx;
			color: #383842;
			line-height: 40rpx;
		}

		.date {
			display: flex;
			align-items: center;
			padding: 10rpx;
			margin-top: 32rpx;
			background: linear-gradient(270deg, rgba(157, 200, 81, 0) 0%, rgba(157, 200, 81, 0.3) 100%);

			.icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}

			.date-text {
				font-size: 24rpx;
				color: #606366;
			}
		}
	}

	.bg {
		height: 16rpx;
		background: #F7F7F7;
	}

	.eq-expian {
		padding: 40rpx 50rpx;

		.model {
			display: flex;
			line-height: 1;
			margin-bottom: 30rpx;

			.model-logo {
				background-color: #a7cd39;
				width: 210rpx;
				height: 70rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #353742;
				text-align: center;
				line-height: 70rpx;
				margin-right: 32rpx;
			}

			.model-text {
				.number {
					font-size: 40rpx;
					color: #343940;
					font-weight: bold;
					margin-bottom: 6rpx;
				}

				.name {
					font-size: 24rpx;
					color: #626263;
				}
			}
		}

		.tj-btn {
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 96rpx;
			border-radius: 48rpx;
			background: #A2C833;
			box-shadow: 0px 0px 7px 0px rgba(108, 135, 29, 0.3);
		}

		.title {
			font-size: 36rpx;
			color: #a2c833;
			font-weight: 600;
			line-height: 46rpx;
			margin-bottom: 10rpx;
		}

		.expian-list {
			font-size: 24rpx;
			line-height: 32rpx;

			.item {
				position: relative;
				padding-left: 28rpx;
			}

			.item::before {
				position: absolute;
				left: 12rpx;
				content: '';
				top: 12rpx;
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				background-color: #a2c833;
			}
		}
	}


	.params {
		margin-bottom: 48rpx;

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.title {
				font-size: 28rpx;
				color: #303337;
				line-height: 40rpx;

				.down {
					width: 28rpx;
					height: 28rpx;
					margin-left: 8rpx;
				}
			}

			.arrow-right {
				.arrow-item {
					font-size: 24rpx;
					color: #303337;
					margin-left: 20rpx;


					.dot {
						width: 10rpx;
						height: 10rpx;
						background-color: #303337;
						border-radius: 50%;
						margin-right: 6rpx;
					}

					.black {
						background-color: #303337;
					}
				}
			}
		}
	}

	.params-group {
		padding: 46rpx 30rpx;
	}

	.table {
		.table-head {
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			padding: 12rpx 24rpx;
			background-color: #5E6067;
		}

		.table-cell {
			display: flex;
			align-items: center;

			.table-td {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				height: 112rpx;
				color: #363841;
				line-height: 36rpx;
				padding: 16rpx 24rpx 24rpx;
				border-left: 2rpx solid #DBDCE0;
				border-bottom: 2rpx solid #DBDCE0;
				vertical-align: middle;
			}

			.table-td:last-child {
				border-right: 2rpx solid #DBDCE0;
			}
		}
	}

	.col1 {
		width: 39%;
	}

	.col2 {
		width: 61%;
	}


	.tab-fixed {
		display: flex;
		align-items: center;

		.tab-link {
			width: 184rpx;
			text-align: center;
			line-height: 1;
			padding: 12rpx 0 20rpx;

			.icon {
				width: 64rpx;
				height: 64rpx;
				display: block;
				margin: 0 auto;
			}

			.tab-link-title {
				font-size: 24rpx;
				color: #606366;
			}
		}

		.tab-fixed-group {
			display: flex;
			border-radius: 40rpx;
			background-color: #A2C833;
			margin-right: 24rpx;

			.btn {
				font-size: 32rpx;
				color: #fff;
				line-height: 80rpx;
				text-align: center;
				position: relative;
			}

			.btn-black {
				width: 47%;
				background: #303337;
				border-radius: 40rpx 0 0 40rpx;
			}
			
			.btn-black::before {
				content: '';
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				width: 0;
				height: 0;
				border-top: 80rpx solid #A2C833;
				border-left: 32rpx solid transparent;
			}
		}
	}
</style>
